import React from "react";
import { getDataMovieList } from "../api/getData";
import { Spin, Card } from "antd";
import styles from "../../css/MovieList.jsx";
const { Meta } = Card;
export default class MovieList extends React.Component {
  constructor() {
    super();
    this.state = {
      mType: "in_theaters",
      nowPage: "1",
      isLoading: true,
      movieList: [],
      pageSize: 10
    };
  }
  render() {
    return (
      <div style={{ textAlign: "center" }}>
        {this.state.isLoading ? (
          <Spin size="large" />
        ) : (
          <div style={styles.mlist}>
            {this.state.movieList.map(item => (
              <Card
                key={item.id}
                hoverable
                style={styles.mlist.mitem}
                cover={
                  <img
                    alt="example"
                    style={styles.mlist.mitem.img}
                    src={item.images.small}
                  />
                }
              >
                <Meta
                  title="Europe Street beat"
                  description="www.instagram.com"
                />
              </Card>
            ))}
          </div>
        )}
      </div>
    );
  }
  componentWillMount = async () => {
    this.getMovieList();
  };
  componentWillReceiveProps = nextProps => {
    this.setState(
      {
        mType: nextProps.match.params.type,
        nowPage: nextProps.match.params.page,
        isLoading: true
      },
      function() {
        this.getMovieList();
      }
    );
  };
  getMovieList = async () => {
    const start = (this.state.nowPage - 1) * this.state.pageSize;
    const res = await getDataMovieList({
      mType: this.state.mType,
      nowPage: this.state.nowPage,
      count: this.state.pageSize,
      start
    });
    const data = await res.json();
    this.setState({
      isLoading: false,
      movieList: data.subjects
    });
    console.log(data.subjects);
  };
}
